<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:set var="ok" value="%{getText(\"button.ok\")}" />
<s:set var="cancel" value="%{getText(\"button.cancel\")}" />
<s:set var="createSuccessfulMsg"
  value="%{getText('info.create.successful', {getText('title.due.date.period')})}" />
<s:set var="requiredMsg" value="%{getText('error.required')}" />
<script type="text/javascript">
  function resetForm() {
    $('#due-date-add-dialog-form :input:not(.spinner)').val('');
    $('#due-date-add-dialog-form .spinner').val('0');
    focusOnFirstElement();
  }

  function focusOnFirstElement() {
    setTimeout(function() {
      $('#due-date-add-dialog-form :input:visible:enabled:first').focus();
    },10);
  }

  $(function() {
    $('#dueDatePeriodAddMsg').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $("#due-date-add-dialog-form")
        .dialog(
            {
              height : 450,
              width : 700,
              modal : true,
              buttons : {
                '<s:property value="#ok" />' : function() {
                  var bValid = $('#due-date-add-form').valid();
                  if (bValid) {
                    jQuery
                        .ajax({
                          url : '${pageContext.request.contextPath}/misc/period/dueDate/createDueDatePeriod.action',
                          type : 'POST',
                          dataType : 'json',
                          cache : false,
                          data : {
                            'dueDatePeriod.code' : $('#due-date-add-form #code').val(),
                            'dueDatePeriod.year' : $('#due-date-add-form #dueDateYear').val(),
                            'dueDatePeriod.month' : $('#due-date-add-form #dueDateMonth').val(),
                            'dueDatePeriod.week' : $('#due-date-add-form #dueDateWeek').val(),
                            'dueDatePeriod.day' : $('#due-date-add-form #dueDateDay').val()
                          },
                          success : function(data) {
                            var msg = '';
                            var status = data.status;
                            if (status == 'SUCCESS') {
                              msg = '<s:property value="#createSuccessfulMsg"/>';
                              $('#listDueDatePeriod').trigger('reloadGrid');
                              resetForm();
                            } else if (status == 'ERROR') {
                              if (data.errors) {
                                var errors = data.errors;
                                for ( var i = 0; i < errors.length; i++) {
                                  msg += errors[i];
                                  if (i < errors.length - 1) {
                                    msg += ', ';
                                  }
                                }
                              }
                            }
                            $('#dueDatePeriodAddMsg').attr('title',msg).tooltip('open');
                            setTimeout(function() {
                              $('#dueDatePeriodAddMsg').tooltip("close").attr("title","");
                            },1500);
                          }
                        });

                  }
                },
                '<s:property value="#cancel" />' : function() {
                  $(this).remove();
                }
              },
              close : function() {
                $(this).remove();
              }
            });
    $("#dueDatePeriodAddAccordion").multipleaccordion();
    $('#dueDatePeriodAddAccordion > div > table td.LABEL').css({
      'width' : '95px'
    });
    $('input, select, textarea, button').not(':hidden').each(function(idx) {
      $(this).prop('tabindex',idx + 1);
    });
    $('#due-date-add-dialog-form').wrap('<form id="due-date-add-form">');
    $('#due-date-add-form .spinner').css('width','30px').spinner().spinner('value',0);
    $.validator.setDefaults({
      errorClass : 'ui-state-error',
      errorPlacement : function(error,element) {
        if (element[0].className.indexOf('spinner') >= 0) {
          error.insertAfter(element.parent().parent().children(':last'));
        } else {
          error.appendTo(element.parent());
        }
      }
    });
    $('#due-date-add-form').validate(
        {
          rules : {
            'dueDatePeriod.code' : {
              required : true
            },
            'dueDateYear' : {
              required : true,
              number : true,
              min : 0
            },
            'dueDateMonth' : {
              required : true,
              number : true,
              min : 0
            },
            'dueDateWeek' : {
              required : true,
              number : true,
              min : 0
            },
            'dueDateDay' : {
              required : true,
              number : true,
              min : 0
            }
          },
          messages : {
            'dueDatePeriod.code' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.due.date.period.code\")}" />')
            },
            'dueDateYear' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.year\")}" />'),
              number : jQuery.format('<s:property value="getText(\'error.numeric.required\')" />',
                  '<s:property value="%{getText(\"field.year\")}" />'),
              min : jQuery.format('<s:property value="getText(\'error.min\')" />',
                  '<s:property value="%{getText(\"field.year\")}" />',0)
            },
            'dueDateMonth' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.month\")}" />'),
              number : jQuery.format('<s:property value="getText(\'error.numeric.required\')" />',
                  '<s:property value="%{getText(\"field.month\")}" />'),
              min : jQuery.format('<s:property value="getText(\'error.min\')" />',
                  '<s:property value="%{getText(\"field.month\")}" />',0)
            },
            'dueDateWeek' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.week\")}" />'),
              number : jQuery.format('<s:property value="getText(\'error.numeric.required\')" />',
                  '<s:property value="%{getText(\"field.week\")}" />'),
              min : jQuery.format('<s:property value="getText(\'error.min\')" />',
                  '<s:property value="%{getText(\"field.week\")}" />',0)
            },
            'dueDateDay' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.day\")}" />'),
              number : jQuery.format('<s:property value="getText(\'error.numeric.required\')" />',
                  '<s:property value="%{getText(\"field.day\")}" />'),
              min : jQuery.format('<s:property value="getText(\'error.min\')" />',
                  '<s:property value="%{getText(\"field.day\")}" />',0)
            }
          }
        });
    focusOnFirstElement();
  });
</script>
<div id="due-date-add-dialog-form"
  title='<s:property value="getText('title.add.due.date.period')"/>'>
  <div id="dueDatePeriodAddMsg"></div>
  <div id="dueDatePeriodAddAccordion">
    <h3>
      <s:property value="getText('title.due.date.period')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="code" class="mandatory"><s:property
                value="getText('field.due.date.period.code')" /></label></td>
          <td><input type="text" id="code" name="dueDatePeriod.code" maxlength="100"></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="dueDateYear" class="mandatory"><s:property
                value="getText('field.year')" /></label></td>
          <td><input id="dueDateYear" name="dueDateYear" class="spinner" /></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="dueDateMonth" class="mandatory"><s:property
                value="getText('field.month')" /></label></td>
          <td><input id="dueDateMonth" name="dueDateMonth" class="spinner" /></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="dueDateWeek" class="mandatory"><s:property
                value="getText('field.week')" /></label></td>
          <td><input id="dueDateWeek" name="dueDateWeek" class="spinner" /></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="dueDateDay" class="mandatory"><s:property
                value="getText('field.day')" /></label></td>
          <td><input id="dueDateDay" name="dueDateDay" class="spinner" /></td>
        </tr>
      </table>
    </div>
  </div>
</div>